<template>
  <el-container class="app-container">
    <!--   顶部搜索栏   -->
    <el-form :inline="true" :model="queryParams" class="demo-form-inline">
      <el-row :gutter="20">
        <el-col :span="14" :push="2">
          <el-form-item label="车型">
            <el-select v-model="queryParams.carType" clearable placeholder="车型">
              <el-option v-for="(type, index) in carType" :key="index" :label="type" :value="type" />
            </el-select>
          </el-form-item>
          <el-form-item label="司机">
            <el-select v-model="queryParams.managerId" clearable placeholder="司机">
              <el-option v-for="(driver, index) in drivers" :key="index" :label="driver.name" :value="driver.emp_id" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="fetchData(queryParams)">
              <i class="el-icon-zoom-in" />
              <span>查询</span>
            </el-button>
          </el-form-item>
        </el-col>
        <el-col :span="4" :push="2">
          <el-button type="success" round @click="dialogAddFormVisible=true">
            <i class="el-icon-circle-plus-outline" />
            <span>新增车辆</span>
          </el-button>
        </el-col>
      </el-row>
    </el-form>
    <!--    表格    -->
    <el-main>
      <el-table
        v-loading="listLoading"
        :data="list"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
      >
        <el-table-column align="center" label="" width="95">
          <template slot-scope="scope">
            {{ scope.$index }}
          </template>
        </el-table-column>
        <el-table-column label="编号">
          <template slot-scope="scope">
            {{ scope.row.carId }}
          </template>
        </el-table-column>
        <el-table-column label="车型" width="110" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.carType }}</span>
          </template>
        </el-table-column>
        <el-table-column label="司机工号" width="110" align="center">
          <template slot-scope="scope">
            {{ scope.row.managerId }}
          </template>
        </el-table-column>
        <el-table-column label="司机姓名" width="110" align="center">
          <template slot-scope="scope">
            {{ scope.row.managerName }}
          </template>
        </el-table-column>
        <el-table-column label="服役时间" width="180" align="center">
          <template slot-scope="scope">
            <i class="el-icon-time" />
            <span>
              {{ scope.row.entryDate }}
            </span>
          </template>
        </el-table-column>
        <el-table-column class-name="status-col" label="当前状态" width="110" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.state | statusFilter">{{ scope.row.state }}</el-tag>
          </template>
        </el-table-column>

        <el-table-column align="center" prop="created_at" label="操作" width="200" fixed="right">
          <template slot-scope="scope">
            <el-button type="primary" @click="openEditCar(scope.$index)">编辑</el-button>
            <el-button type="danger" @click="deleteCar(scope.row.carId, scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="编辑车辆信息" :visible.sync="dialogFormVisible" center>
        <el-form :model="carInfoForm">
          <el-form-item label="车辆编号" :label-width="formLabelWidth">
            <el-input v-model="carInfoForm.carId" autocomplete="off" disabled />
          </el-form-item>
          <el-form-item label="车型" :label-width="formLabelWidth">
            <el-select v-model="carInfoForm.carType" clearable placeholder="请选择车辆类型">
              <el-option v-for="(type, index) in carType" :key="index" :label="type" :value="type" />
            </el-select>
          </el-form-item>
          <el-form-item label="司机工号" :label-width="formLabelWidth">
            <el-select v-model="carInfoForm.managerId" clearable placeholder="请选择司机工号">
              <el-option v-for="(driver, index) in drivers" :key="index" :label="driver.name" :value="driver.emp_id" />
            </el-select>
          </el-form-item>
            <el-form-item label="状态" :label-width="formLabelWidth">
              <el-select v-model="carInfoForm.state" clearable placeholder="请选择车辆状态">
                <el-option label="空闲" value="free" />
                <el-option label="使用中" value="busy" />
              </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="editCar">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog title="新增车辆信息" :visible.sync="dialogAddFormVisible" center>
        <el-form :model="carInfoForm">
          <!--          <el-form-item label="车辆编号" :label-width="formLabelWidth">-->
          <!--            <el-input v-model="carInfoForm.carId" autocomplete="off"/>-->
          <!--          </el-form-item>-->
          <el-form-item label="车型" :label-width="formLabelWidth">
            <el-select v-model="carInfoForm.carType" clearable placeholder="请选择车辆类型">
              <el-option v-for="(type, index) in carType" :key="index" :label="type" :value="type" />
            </el-select>
          </el-form-item>
          <el-form-item label="司机工号" :label-width="formLabelWidth">
            <el-select v-model="carInfoForm.managerId" clearable placeholder="司机">
              <el-option v-for="(driver, index) in drivers" :key="index" :label="driver.name" :value="driver.emp_id" />
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogAddFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addCar">确 定</el-button>
        </div>
      </el-dialog>
    </el-main>
    <!--    底部分页    -->
    <el-footer>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :current-page="queryParams.current"
        :page-size="queryParams.size"
        style="display: flex;align-items: center;justify-content: center;"
        @current-change="changePage($event)"
      />
    </el-footer>
  </el-container>
</template>

<script>

import { getCarList, getDrivers, getCarType, deleteCar, addCar, getCarById, editCar } from '@/api/car'

// import * as all from '@/api/car';

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        free: 'success',
        busy: 'gray'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: null,
      carType: [],
      drivers: [],
      listLoading: true,
      dialogFormVisible: false,
      dialogAddFormVisible: false,
      formLabelWidth: '60px',
      total: 0,
      carInfoForm: {
        index: '',
        carId: '',
        carType: '',
        managerId: '',
        managerName: '',
        state: '',
        entryDate: ''
      },
      queryParams: {
        carType: '',
        managerId: '',
        size: 4,
        current: 1
      }
    }
  },
  created() {
    this.fetchData(this.queryParams)
    this.getCarType()
    this.getDrivers()
  },
  methods: {
    fetchData(params) {
      console.log(params)
      this.listLoading = true
      // const empParam = JSON.parse(JSON.stringify(vo))
      // if (!empParam?.type) {
      //   delete empParam.type
      // }
      // if (!empParam?.department) {
      //   delete empParam.department
      // }
      getCarList(params).then(response => {
        const { content } = response
        this.list = content.records
        this.total = content.total
        this.queryParams.current = content.current
        this.queryParams.size = content.size
        this.listLoading = false
      }).catch(error => {
        console.log(error)
      })
    },
    getCarType() {
      getCarType().then(response => {
        const { content } = response
        this.carType = content
      })
    },
    getDrivers() {
      getDrivers().then(response => {
        const { content } = response
        console.log(content)
        this.drivers = content
      })
    },
    deleteCar(carId, index) {
      this.$confirm('此操作将永久删除编号为' + carId + '的车辆, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(carId)
        deleteCar({ carId: carId }).then(response => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.list.splice(index, 1)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    openEditCar(index) {
      this.dialogFormVisible = true
      this.carInfoForm = this.list[index]
      this.carInfoForm['index'] = index
    },
    editCar() {
      editCar(this.carInfoForm).then(response => {
        this.dialogFormVisible = false
        this.list[this.carInfoForm.index]['managerName'] = response.content
      })
    },
    addCar() {
      // this.$refs.carInfoForm.validate((valid) => {
      //   if (valid) {
      //
      //   } else {
      //     console.log('error submit!!')
      //     return false
      //   }
      // })
      addCar(this.carInfoForm).then(response => {
        console.log(response)
        this.dialogAddFormVisible = false
        const carId = response.content
        getCarById(carId).then(response => {
          const { content } = response
          this.list.push(content)
        })
      })
    },
    changePage(event) {
      // console.log(event)
      this.queryParams.current = event
      this.fetchData(this.queryParams)
    }
  }
}
</script>

